<template>
	<view class="goods_popup_container">
		<u-popup mode="bottom" closeable close-icon-color="#999" round="24rpx" :show="popVisible"
			:safeAreaInsetBottom="safeAreaInsetBottom" @close="handleColse">
			<view class="popup_content">
				<view class="plr_16 pt_16">
					<view class="fx fx_nw pb_16">
						<image class="width_120 height_82 br_8 mr_12" :src="coverImage" mode="aspectFit">
						</image>
						<view class="fx_1 flow_h">
							<view v-if="type == 6">
								<text class="fz_23 fb fc_zhured">{{currentSpec.integra||0}}积分</text>
								<text class="fz_14 pb_10 fc_zhured">+ ¥</text>
								<text class="fz_23 fb fc_zhured">{{salePrice}}</text>
							</view>
							<view class="fc_r fb" v-else>
								<text>￥</text>
								<text class="fz_24">{{salePrice}}</text>
							</view>
							<view class="mt_4 height_12" v-if="data.isShowStock">
								<view class="fz_12 fc_999 lh_12">
									库存：{{currentSpec.stock==undefined?data.stock||0:currentSpec.stock||0}}
								</view>
							</view>
							<view class="mt_10 fz_12 fc_999">
								商品编号：{{currentSpec.productNo==undefined?data.productNo||'':currentSpec.productNo||''}}
							</view>
						</view>
					</view>
					<view class="flow_y maxh_200 box pb_16" style="margin-top: -20rpx;">
						<template v-for="item,index in specs">
							<view class="fz_12 mt_12" :key="index">
								{{item.name||''}}
							</view>
							<view class="fx fx_w grid_8 mt_8" :key="index">
								<view class="bo_1 ptb_4 plr_12 br_4 fz_12"
									:style="[selectStyle(item,item1),disableStyle({name: item.name,value:item1})]"
									v-for="item1,index1 in item.valueName" :key="index1"
									@click="handleSelect(item,item1)">
									{{item1||''}}
								</view>
							</view>
						</template>
						<view class="fx aic jcb grid_8 mt_12" v-if="$utils.goodsTypeDir(currentSpec.goodsType)!=3">
							数量
							<u-number-box ref="numberboxRef" :asyncChange="true" v-model="currentNum" buttonSize="48rpx" color="#000"
								bgColor="#fff" @focus="handleFocusNum" @change="handleChangeNum"
								@blur="handleBlurNum"></u-number-box>
						</view>
					</view>
				</view>
				<button v-if="$utils.goodsTypeDir(currentSpec.goodsType)==1||specType!=2"
					class="w100 lh_44 custom_btn br_0 fz_14 fc_fff bc_primary" @click="handleColse(true)">确定</button>
				<button v-else-if="$utils.goodsTypeDir(currentSpec.goodsType)==3"
					class="w100 lh_44 custom_btn br_0 fz_14 fc_fff bc_primary" @click="handleColse(true)">发起砍价</button>
				<button v-else-if="$utils.goodsTypeDir(currentSpec.goodsType)==5"
					class="w100 lh_44 custom_btn br_0 fz_14 fc_fff bc_primary" @click="handleColse(true)">立即开团</button>
				<button v-else-if="$utils.goodsTypeDir(currentSpec.goodsType)==6"
					class="w100 lh_44 custom_btn br_0 fz_14 fc_fff bc_primary" @click="handleColse(true)">立即兑换</button>
				<button v-else-if="$utils.goodsTypeDir(currentSpec.goodsType)==2&&data.activitiesStatus==3"
					class="w100 lh_44 custom_btn br_0 fz_14 fc_fff bc_primary fx aic jcc fx_nw"
					disabled>{{$u.timeFormat($utils.getFullTime(data.seckillBeginTime), 'hh点MM分')}}即将开始，剩余倒计时：
					<u-count-down
						:time="new Date($utils.getFullTime(data.seckillBeginTime)).getTime()-new Date().getTime()"
						:format="$utils.getCountdownformat(new Date(data.seckillBeginTime).getTime() - new Date().getTime())"
						@finish="handleRefresh"></u-count-down>
				</button>
				<button
					v-else-if="$utils.goodsTypeDir(currentSpec.goodsType)==2&&(data.activitiesStatus==2||data.activitiesStatus==4)"
					class="w100 lh_44 custom_btn br_0 fz_14 fc_fff bc_primary fx aic jcc fx_nw"
					disabled>{{$u.timeFormat($utils.getFullTime(data.seckillBeginTime), 'hh点MM分')}}即将开始，剩余倒计时：
					秒杀已结束
				</button>
				<button v-else-if="$utils.goodsTypeDir(currentSpec.goodsType)==2&&!data.id"
					class="w100 lh_44 custom_btn br_0 fz_14 fc_fff bc_primary fx aic jcc fx_nw"
					disabled>{{$u.timeFormat($utils.getFullTime(data.seckillBeginTime), 'hh点MM分')}}即将开始，剩余倒计时：
					即将开始
				</button>
				<button v-else class="w100 lh_44 custom_btn br_0 fz_14 fc_fff bc_primary"
					@click="handleColse(true)">确定</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getStaticUrl
	} from '@/utils/index.js'
	export default {
		props: {
			data: {
				type: Object,
				default: () => ({})
			},
			num: {
				type: Number | String,
				default: 1
			},
			type: {
				type: Number | String,
				default: 1
			},
			visible: {
				type: Boolean,
				default: false,
			},
			// 是否显示底部安全区域
			safeAreaInsetBottom: {
				type: Boolean,
				default: true,
			},
			immediatly: {
				type: Boolean,
				default: false
			},
			specType: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				popVisible: false,
				specs: [], // 规格
				specsValue: [],
				currentSpec: {}, // 当前规格
				isFocus: false, // 数量步进器是否聚焦
				currentNum: 1, // 当前数量
				specsList: [],
			}
		},
		computed: {
			disableStyle() {
				return item => {
					const ruleValue = JSON.parse(JSON.stringify(this.currentSpec.ruleValue || []))
					const index = ruleValue.findIndex(item1 => item1.name == item.name)
					const spec = ruleValue.find(item1 => item1.name == item.name)
					spec.value = item.value
					if (index > -1)
						ruleValue.splice(index, 1, spec)
					let currentSpec = {}
					ruleValue.forEach(item1 => {
						currentSpec[item1.name] = item1.value
					})
					// console.log('ruleValue', ruleValue)
					// console.log('specsList', this.specsList)
					// console.log('specsValue', this.specsValue)
					return this.specsList.some(item1 => JSON.stringify(item1) == JSON.stringify(currentSpec)) ? {} : {
						background: '#ccc',
						color: '#999'
					}
				}
			},
			selectStyle() {
				return (parent, item) => {
					const item1 = this.specsValue ? (this.specsValue.find(item1 => item1.ruleValue.some(item2 => item2
						.name == item)) || {}) : {}
					if (item1.goodsType != 0 && item1.goodsType != null && this.specType == 1) {
						return {
							backgroundColor: '#ccc',
							color: '#999'
						}
					}
					return this.currentSpec.ruleValue && this.currentSpec.ruleValue.some(item1 => parent.name == item1
						.name && item1.value ==
						item) ? {
						borderColor: '#F08519',
						color: '#F08519',
					} : {}
				}
			},
			getStaticUrl() {
				return (src) => getStaticUrl(src)
			},
			// 积分价格
			integralPrice() {
				if (this.data && this.data.salePrice) {
					return {
						integral: this.$utils.floatMul(this.data.salePrice || 0, this.$utils.floatMul(0.01, this
							.data.integralPayRatio || 0)),
						price: this.$utils.floatMul(this.data.salePrice || 0, this.$utils.floatMul(0.01, (100 -
							this
							.data.integralPayRatio || 0)))
					}
				}
				return {
					integral: 0,
					price: 0
				}
			},
			coverImage() {
				return this.$utils.getStaticUrl(this.currentSpec.specificationImageUrl || this.data.coverImageUrl)
			},
			salePrice() {
				if (this.type == 2 || this.type == 4 || this.type == 5) {
					return this.currentSpec.activityPrice || this.data.activityPrice
				}
				return this.$store.state.appType === this.$base.USER_TYPE ? (this.currentSpec.salePrice || this.data
					.salePrice || 0) : (this.currentSpec.wholesalePrice || this.data.wholesalePrice ||
					this.currentSpec.salePrice || this.data.salePrice || 0)
			}
		},
		watch: {
			visible: {
				handler(newVal) {
					this.popVisible = newVal;
					if (newVal) {
						this.currentNum = this.num
						this.specs = this.data.ruleDetailInfoVoList || []
					}
					this.specsValue = this.data.ruleInfoVoList ? this.data.ruleInfoVoList.map(item => ({
						...item,
						ruleValue: item.ruleValue ? JSON.parse(item.ruleValue) : []
					})) : []
					this.specsList = this.specsValue.map(item => {
						let obj = {}
						if (item.ruleValue && item.ruleValue.length) {
							item.ruleValue.forEach(item1 => {
								obj[item1.name] = item1.value
							})
							return obj
						} else {
							return []
						}
					})
					this.currentSpec = this.specsValue.find(item => item.id == this.data.id) || {}
					// console.log('1111', this.specsValue)
					// console.log('2222', this.currentSpec)
					if (this.type == 6) {
						this.$set(this.currentSpec, 'goodsType', 5)
					}
					console.log('this.currentSpec', this.currentSpec, this.$utils.goodsTypeDir(this.currentSpec.goodsType))
				},
				immediate: true
			},
			currentSpec: {
				handler(newVal) {
					console.log('newVal', newVal)
				},
				deep: true
			}
		},
		methods: {
			handleFocusNum() {
				this.isFocus = true
			},
			handleBlurNum({
				value
			}) {
				this.isFocus = false
				this.currentNum = value * 1
			},
			handleChangeNum({
				value
			}) {
				if (this.isFocus) return
				this.currentNum = value * 1
			},
			// 关闭弹窗
			handleColse(confirm = false) {
				if (this.isFocus) return
				// console.log(111,this.specType,this.$utils.goodsTypeDir(this.currentSpec.goodsType),confirm)
				if (this.specType === 1 && this.$utils.goodsTypeDir(this.currentSpec.goodsType) > 1 && this.$utils
					.goodsTypeDir(this.currentSpec.goodsType) < 6 && confirm) {
					return this.$utils.showToast('活动商品，不能加入购物车，请点击立即购买')
				}
				this.$nextTick(() => {
					this.$emit('close', this.currentSpec, this.currentNum, confirm)
				})
			},
			handleSelect(item, item1) {
				const item2 = this.specsValue ? (this.specsValue.find(item => item.ruleValue.some(item2 => item2.name ==
					item1)) || {}) : {}
				if (item2.goodsType != 0 && item2.goodsType != null && this.specType == 1) {
					return
				}
				if (!this.disableStyle({
						name: item.name,
						value: item1
					})) {
					return
				}
				const {
					ruleValue
				} = this.currentSpec
				if (ruleValue) {
					const ruleValue1 = JSON.parse(JSON.stringify(ruleValue))
					ruleValue1.forEach(item2 => {
						if (item2.name == item.name) {
							item2.value = item1
						}
					})
					this.currentSpec = this.specsValue.find(item2 => JSON.stringify(item2.ruleValue || []) == JSON
						.stringify(ruleValue1))
					this.$emit('change', this.currentSpec)
				}
			},
		},
	}
</script>